<html>
<head>
<title>Nodstrum - Load External Content Using Javascript and PHP</title>

<!-- Import Javascript Libraries -->
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>

<!-- Our JS Functions -->
<script type="text/javascript">
	function startLoading() {
	  Element.show('mainAreaLoading');
	  Element.hide('mainAreaInternal');
	}
	function finishLoading() {
	  Element.show('mainAreaInternal');
	  setTimeout("Effect.toggle('mainAreaLoading');", 1000);
	}

	function loadContent(id) {
	  startLoading();
	  new Ajax.Updater('mainAreaInternal', 'rpc.php', {method: 'post', postBody:'content='+ id +''});
	  finishLoading();
	}
</script>

<!-- CSS -->
<style>
body {
		font-family: Tahoma;
		font-size: 12px;
}

.mainAreaInternal {
   position: absolute;
   top: 40px;
   left: 0px;
   width: 500px;
   height: 300px;
   background-color: #cccccc;
   overflow: auto;
	padding: 2px;
   z-index: 0;
 }

 .mainAreaLoading {
   position: absolute;
   top: 40px;
   left: 0px;
   width: 500px;
   height: 300px;
	background-color: #999999;
   z-index: 1;
 }
</style>

</head>
<body>

	<div>
		<span style="cursor: pointer" onclick="loadContent(1);">Load Content 1</span> |
	   <span style="cursor: pointer" onclick="loadContent(2);">Load Content 2</span> | 
		<span style="cursor: pointer" onclick="loadContent(3);">Load Long Content</span> | 
		<span style="cursor: pointer" onclick="loadContent(999);">This 'id' is not in the case statement.</span>

		<!-- Navigation End -->
		<p id="mainArea">
		<p id="mainAreaInternal" class="mainAreaInternal">

		This is the content that will be visible at the very beginning.

		<!-- End Main Area Internal -->
		<p id="mainAreaLoading" class="mainAreaLoading" style="display: none">

		<span style="position: relative; top: 100px; left: 100px">
			<img src="images/ajaxLoad.gif" align="center">
			Loading Please Wait...
		</span>
	
	</div>
	<!-- End Main Area -->

</body>
</html>